<template>
  <div>
    <div>{{this.user.username}}</div>
    <mt-button type="primary"
               @click="submit">提交vuex</mt-button>
    <mt-button type="primary"
               @click="onPickerHandler">date-picker</mt-button>
    <date-picker v-model="picker"
                 :isPickershow="isPickershow"
                 @onPickerHandler="isPickershow=!isPickershow" />
    {{picker}}
    <dialog-drag @onDragHandler="onDragHandler" />
    <loading :isLoading='isLoading'></loading>
    <swiper :data="list"
            @swiperOnClickHandler="swiperOnClickHandler"></swiper>
    <swiper ref="swiper"
            @swiperOnChangeHandler="swiperOnChangeHandler"
            :data="list">
      <li v-for="(item,i) in list"
          :key="i"
          @click.stop.prevent="swiperOnClickHandler(item)">
        <img :src="item.imageUrl">
      </li>
    </swiper>
    <mt-button clsss="button"
               type="primary"
               :class="[currentIndex==index?'active':'']"
               v-for="(item,index) in list"
               :key="index"
               @click="tabOnClickHandler(index)">00000{{index}}</mt-button>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapGetters, mapMutations, mapActions } from 'vuex';
import DatePicker from 'components/date-picker';
import DialogDrag from 'components/dialog-drag';
import Swiper from 'components/swiper';
import Loading from 'components/loading';
export default {
	data () {
		return {
			isLoading : false,
			isPickershow : false,
			picker : [],
			currentIndex : 0,
			list : [{ imageUrl : require('./img/001.jpg') }, { imageUrl : require('./img/002.jpg') }, { imageUrl : require('./img/003.jpg') }, { imageUrl : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560758957939&di=2db1be688699cfc2b66ab2c8c0f2be1f&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fa6efce1b9d16fdfa86c89726b68f8c5495ee7b55.jpg' }]
		};
	},
	components : {
		DatePicker,
		DialogDrag,
		Swiper,
		Loading
	},
	created () {
		setTimeout(() => {
			this.list = [{ imageUrl : require('./img/001.jpg') }];
			this.isLoading = true;
		}, 10000);
		setTimeout(() => {
			this.isLoading = false;
		}, 6000);
	},
	computed : {
		...mapGetters(['user'])
	},
	methods : {
		...mapMutations({
			homeMutation : 'USER'
		}),
		...mapActions(['userAction', 'getUserInfo'],
		),
		submit () {
      import(/* webpackPrefetch: true */ './prefetch.js').then(({ default : handlerClick }) => {
      	handlerClick.bind(this)();
      });
		},
		onDragHandler () {
			console.log('onDragHandler');
		},
		onPickerHandler () {
			this.isPickershow = !this.isPickershow;
		},
		swiperOnClickHandler (item) {
			console.log(item);
		},
		swiperOnChangeHandler (i) {
			this.currentIndex = i;
		},
		tabOnClickHandler (i) {
			this.$refs.swiper.tabOnClickHandler(true, i);
		}
	}
};
</script>
<style lang="scss" scoped>
.active {
  color: aquamarine;
}
</style>
